<template>
    <div>
      <commpVxeTable
        :key="reCommpVxeTable"
        :config="dataTableConfig"
        :columns="columnsVxe"
        :formItem="formItem"
        @checkboxChange="checkboxChange"
        ref="administrativeOffice"
        @searchEvent="searchEvent"
        @resetEvent="resetEvent"
        >
        <template v-slot:externalOperations="{data}"  >
            <vxe-form-item>
                <template>
                    <a-button class="blue-btn" @click="addHandele">添加</a-button>
                </template>
            </vxe-form-item>
            <vxe-form-item>
                <template>
                    <a-button class="red-btn" @click="deleteBatchHandele">批量删除</a-button>
                </template>
            </vxe-form-item>
        </template>
        <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
            <a-form layout="inline" class="search-form" >
                <a-form-item>
                    <a-button class="blue-btn" @click="editHandele(row)">编辑</a-button>
                </a-form-item>
                <a-form-item>
                    <a-popconfirm
                        title="您确定要删除这条数据吗?"
                        ok-text="确定"
                        cancel-text="取消"
                        @confirm="deleteHandele(row)"
                        @cancel="cancel"
                        >
                            <a-button class="red-btn">删除</a-button>
                    </a-popconfirm>
                </a-form-item>
            </a-form>
        </template>
      </commpVxeTable>
      <applicationForm-Modal ref="applicationFormModalRef" :linkName="linkName" :passObj="passObj" @success="success"></applicationForm-Modal>
    </div>
  </template>
  <script>
  import assessCheckApi from './service/api.js'
  import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
  import applicationFormModal from './applicationForm.vue'
  import { deleteLgqsFlowJob,} from './service/index.js'
  export default {
    components: {
      commpVxeTable,applicationFormModal
    },
    props:{
        linkName:{
            type:String,
            default:'',
            required:false,
        },
    },
    data() {
      return {
        reCommpVxeTable: '',
        dataTableConfig: {
          api: assessCheckApi.list,
          rowId: 'id',
          urlType: true,
          paramet:{
            fhjmc: this.linkName
          }
        },
        formItem: [
          {
            label: '申请人',
            model: 'fsqr',
          },{
            label: '申请时间',
            model: 'fsqsj',
          },{
            label: '申请理由',
            model: 'fsqly',
          },
        ],
        columnsVxe: [
            {
                type: 'checkbox',
                width: 60,
                fixed: 'left'
            },{
                title: '申请人',
                field: 'fsqr',
            },{
                title: '申请时间',
                field: 'fsqsj',
            },{
                title: '申请理由',
                field: 'fsqly',
            },{
                title: '退回意见',
                field: 'fthyj',
            },{
                title: '操作',
                field: 'id',
                width: 160,
                fixed: 'right',
                slots: {
                // 使用插槽模板渲染
                    default: 'operation_btn',
                },
            }
        ],
        jobidList: [],
        passObj: {},
      }
    },
    methods: {
      // 勾选
      checkboxChange(val){
        //console.log('已选择',val)
        this.jobidList = []
        if(val.length){
          val.forEach(item => {
              this.jobidList.push(item.jobid)
          });
        }
      },
      // 搜索
      searchEvent(){
        this.dataTableConfig.paramet = {
            ...this.dataTableConfig.paramet,
        }
        //console.log(this.dataTableConfig.paramet)
      },
      // 重置
      resetEvent(){
        this.dataTableConfig.paramet = {
            ...this.dataTableConfig.paramet,
        }
      },
      // 添加
    addHandele(){
        this.$nextTick(_ => {
            this.$refs.applicationFormModalRef.handleModalVisible = true
        })
    },
    // 编辑
    editHandele(row){
        this.passObj = {
            ...row,
            id: row.oaid,
        }
        this.$nextTick(_ => {
            this.$refs.applicationFormModalRef.handleModalVisible = true
        })
    },
    // 删除
    deleteHandele(row){
        deleteLgqsFlowJob({jobids:row.jobid}).then(res => {
            if(res.code == 200){
                this.$message.success(res.message)
                this.reCommpVxeTable = Date.now()
            } else {
                this.$message.warning(res.message)
            }
        })
    },
    // 批量删除
    deleteBatchHandele(){
        let that = this
        if(that.jobidList.length == 0){
            that.$message.warning('请选择删除项目')
        } else {
            that.$confirm({
                title: '您确定要删除这些数据吗?',
                content: '',
                okText: '确定',
                okType: 'danger',
                cancelText: '取消',
                onOk() {
                    let list = that.jobidList.toString()
                    //console.log(list)
                    deleteLgqsFlowJob({jobids:list}).then(res => {
                        //console.log(res)
                        if(res.code == 200){
                            that.reCommpVxeTable = Date.now()
                            that.$message.success(res.message)
                        } else {
                            that.$message.warning(res.message)
                        }
                    })
                },
                onCancel() {
                    //console.log('Cancel');
                },
            });
        }
    },
        cancel(){},
        // 弹窗提交成功
        success(){
            // 刷新表格 清空id数组
            this.$refs.administrativeOffice.resetEvent()
            this.jobidList = []
        }
    },
}
</script>
